<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>维护记录 - 智驭安行系统</title>
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<link rel="stylesheet" href="./css/vehicle-maintenance.css">
		<link rel="icon" href="./img/logo_nobackground.png" type="image/png">
	</head>
	<body>
		<div id="app">
			<!-- 页面头部 -->
			<header class="page-header">
				<div class="header-left">
					<h1>维护记录</h1>
					<el-breadcrumb separator="/">
						<el-breadcrumb-item>首页</el-breadcrumb-item>
						<el-breadcrumb-item>车辆管理</el-breadcrumb-item>
						<el-breadcrumb-item>维护记录</el-breadcrumb-item>
					</el-breadcrumb>
				</div>
				<div class="header-right">
					<el-button type="primary" @click="showAddDialog">
						<i class="el-icon-plus"></i> 添加维护记录
					</el-button>
				</div>
			</header>

			<!-- 主要内容区 -->
			<div class="main-content">
				<!-- 筛选区域 -->
				<div class="filter-section">
					<el-form :inline="true" :model="filterForm" class="filter-form">
						<el-form-item label="车牌号">
							<el-input v-model="filterForm.plateNumber" placeholder="请输入车牌号"></el-input>
						</el-form-item>
						<el-form-item label="维护类型">
							<el-select v-model="filterForm.maintenanceType" placeholder="请选择维护类型">
								<el-option label="常规保养" value="regular"></el-option>
								<el-option label="故障维修" value="repair"></el-option>
								<el-option label="零件更换" value="replacement"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="维护状态">
							<el-select v-model="filterForm.status" placeholder="请选择状态">
								<el-option label="待处理" value="pending"></el-option>
								<el-option label="进行中" value="in-progress"></el-option>
								<el-option label="已完成" value="completed"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="时间范围">
							<el-date-picker
								v-model="filterForm.dateRange"
								type="daterange"
								range-separator="至"
								start-placeholder="开始日期"
								end-placeholder="结束日期">
							</el-date-picker>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="handleFilter">查询</el-button>
							<el-button @click="resetFilter">重置</el-button>
						</el-form-item>
					</el-form>
				</div>

				<!-- 维护记录列表 -->
				<div class="maintenance-list">
					<el-table :data="maintenanceRecords" style="width: 100%" v-loading="loading">
						<el-table-column prop="plateNumber" label="车牌号" width="120"></el-table-column>
						<el-table-column prop="maintenanceType" label="维护类型" width="120">
							<template slot-scope="scope">
								<el-tag :type="getMaintenanceTypeTag(scope.row.maintenanceType)">
									{{ getMaintenanceTypeText(scope.row.maintenanceType) }}
								</el-tag>
							</template>
						</el-table-column>
						<el-table-column prop="description" label="维护内容"></el-table-column>
						<el-table-column prop="status" label="状态" width="100">
							<template slot-scope="scope">
								<el-tag :type="getStatusType(scope.row.status)">
									{{ getStatusText(scope.row.status) }}
								</el-tag>
							</template>
						</el-table-column>
						<el-table-column prop="startDate" label="开始时间" width="180"></el-table-column>
						<el-table-column prop="endDate" label="完成时间" width="180"></el-table-column>
						<el-table-column label="操作" width="200" fixed="right">
							<template slot-scope="scope">
								<el-button type="text" @click="viewDetails(scope.row)">查看</el-button>
								<el-button type="text" @click="editRecord(scope.row)">编辑</el-button>
								<el-button type="text" class="delete-btn" @click="deleteRecord(scope.row)">删除</el-button>
							</template>
						</el-table-column>
					</el-table>

					<!-- 分页 -->
					<div class="pagination-container">
						<el-pagination
							@size-change="handleSizeChange"
							@current-change="handleCurrentChange"
							:current-page="currentPage"
							:page-sizes="[10, 20, 50, 100]"
							:page-size="pageSize"
							layout="total, sizes, prev, pager, next, jumper"
							:total="total">
						</el-pagination>
					</div>
				</div>
			</div>

			<!-- 添加/编辑维护记录对话框 -->
			<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="600px">
				<el-form :model="maintenanceForm" :rules="rules" ref="maintenanceForm" label-width="100px">
					<el-form-item label="车牌号" prop="plateNumber">
						<el-select v-model="maintenanceForm.plateNumber" placeholder="请选择车辆">
							<el-option
								v-for="vehicle in vehicles"
								:key="vehicle.plateNumber"
								:label="vehicle.plateNumber"
								:value="vehicle.plateNumber">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="维护类型" prop="maintenanceType">
						<el-select v-model="maintenanceForm.maintenanceType" placeholder="请选择维护类型">
							<el-option label="常规保养" value="regular"></el-option>
							<el-option label="故障维修" value="repair"></el-option>
							<el-option label="零件更换" value="replacement"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="维护内容" prop="description">
						<el-input type="textarea" v-model="maintenanceForm.description" rows="3"></el-input>
					</el-form-item>
					<el-form-item label="维护状态" prop="status">
						<el-select v-model="maintenanceForm.status" placeholder="请选择状态">
							<el-option label="待处理" value="pending"></el-option>
							<el-option label="进行中" value="in-progress"></el-option>
							<el-option label="已完成" value="completed"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="开始时间" prop="startDate">
						<el-date-picker
							v-model="maintenanceForm.startDate"
							type="datetime"
							placeholder="选择开始时间">
						</el-date-picker>
					</el-form-item>
					<el-form-item label="完成时间" prop="endDate">
						<el-date-picker
							v-model="maintenanceForm.endDate"
							type="datetime"
							placeholder="选择完成时间">
						</el-date-picker>
					</el-form-item>
					<el-form-item label="维护费用" prop="cost">
						<el-input-number v-model="maintenanceForm.cost" :min="0" :precision="2"></el-input-number>
					</el-form-item>
					<el-form-item label="备注" prop="remarks">
						<el-input type="textarea" v-model="maintenanceForm.remarks" rows="2"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogVisible = false">取消</el-button>
					<el-button type="primary" @click="submitForm">确定</el-button>
				</div>
			</el-dialog>

			<!-- 维护详情对话框 -->
			<el-dialog title="维护详情" :visible.sync="detailsVisible" width="800px">
				<div v-if="selectedRecord" class="maintenance-details">
					<el-descriptions :column="2" border>
						<el-descriptions-item label="车牌号">{{ selectedRecord.plateNumber }}</el-descriptions-item>
						<el-descriptions-item label="维护类型">
							<el-tag :type="getMaintenanceTypeTag(selectedRecord.maintenanceType)">
								{{ getMaintenanceTypeText(selectedRecord.maintenanceType) }}
							</el-tag>
						</el-descriptions-item>
						<el-descriptions-item label="维护内容" :span="2">
							{{ selectedRecord.description }}
						</el-descriptions-item>
						<el-descriptions-item label="维护状态">
							<el-tag :type="getStatusType(selectedRecord.status)">
								{{ getStatusText(selectedRecord.status) }}
							</el-tag>
						</el-descriptions-item>
						<el-descriptions-item label="维护费用">
							{{ selectedRecord.cost }} 元
						</el-descriptions-item>
						<el-descriptions-item label="开始时间">{{ selectedRecord.startDate }}</el-descriptions-item>
						<el-descriptions-item label="完成时间">{{ selectedRecord.endDate }}</el-descriptions-item>
						<el-descriptions-item label="备注" :span="2">{{ selectedRecord.remarks }}</el-descriptions-item>
					</el-descriptions>

					<!-- 维护进度时间线 -->
					<div class="maintenance-timeline">
						<h3>维护进度</h3>
						<el-timeline>
							<el-timeline-item
								v-for="(activity, index) in selectedRecord.timeline"
								:key="index"
								:timestamp="activity.time"
								:type="activity.type">
								{{ activity.content }}
							</el-timeline-item>
						</el-timeline>
					</div>
				</div>
			</el-dialog>
		</div>

		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<script>
			new Vue({
				el: '#app',
				data() {
					return {
						// 筛选表单
						filterForm: {
							plateNumber: '',
							maintenanceType: '',
							status: '',
							dateRange: []
						},

						// 维护记录列表
						maintenanceRecords: [
							{
								id: 1,
								plateNumber: '渝A12345',
								maintenanceType: 'regular',
								description: '更换机油、机油滤芯、空气滤芯',
								status: 'completed',
								startDate: '2024-03-10 09:00:00',
								endDate: '2024-03-10 11:30:00',
								cost: 580.00,
								remarks: '常规保养完成',
								timeline: [
									{
										time: '2024-03-10 09:00:00',
										content: '开始维护工作',
										type: 'primary'
									},
									{
										time: '2024-03-10 10:30:00',
										content: '更换机油和滤芯',
										type: 'success'
									},
									{
										time: '2024-03-10 11:30:00',
										content: '维护完成，车辆检查正常',
										type: 'success'
									}
								]
							},
							{
								id: 2,
								plateNumber: '渝B67890',
								maintenanceType: 'repair',
								description: '修复制动系统故障',
								status: 'in-progress',
								startDate: '2024-03-15 14:00:00',
								endDate: '',
								cost: 0.00,
								remarks: '等待配件到货',
								timeline: [
									{
										time: '2024-03-15 14:00:00',
										content: '开始故障诊断',
										type: 'primary'
									},
									{
										time: '2024-03-15 15:30:00',
										content: '确认制动系统故障，等待配件',
										type: 'warning'
									}
								]
							}
						],

						// 车辆列表
						vehicles: [
							{ plateNumber: '渝A12345' },
							{ plateNumber: '渝B67890' }
						],

						// 分页
						currentPage: 1,
						pageSize: 10,
						total: 0,

						// 加载状态
						loading: false,

						// 对话框
						dialogVisible: false,
						dialogTitle: '添加维护记录',
						detailsVisible: false,
						selectedRecord: null,

						// 表单数据
						maintenanceForm: {
							plateNumber: '',
							maintenanceType: '',
							description: '',
							status: '',
							startDate: '',
							endDate: '',
							cost: 0,
							remarks: ''
						},

						// 表单验证规则
						rules: {
							plateNumber: [
								{ required: true, message: '请选择车牌号', trigger: 'change' }
							],
							maintenanceType: [
								{ required: true, message: '请选择维护类型', trigger: 'change' }
							],
							description: [
								{ required: true, message: '请输入维护内容', trigger: 'blur' }
							],
							status: [
								{ required: true, message: '请选择维护状态', trigger: 'change' }
							],
							startDate: [
								{ required: true, message: '请选择开始时间', trigger: 'change' }
							]
						}
					}
				},
				methods: {
					// 获取维护类型标签样式
					getMaintenanceTypeTag(type) {
						const typeMap = {
							'regular': 'success',
							'repair': 'warning',
							'replacement': 'info'
						};
						return typeMap[type] || 'info';
					},

					// 获取维护类型文本
					getMaintenanceTypeText(type) {
						const textMap = {
							'regular': '常规保养',
							'repair': '故障维修',
							'replacement': '零件更换'
						};
						return textMap[type] || type;
					},

					// 获取状态标签样式
					getStatusType(status) {
						const typeMap = {
							'pending': 'info',
							'in-progress': 'warning',
							'completed': 'success'
						};
						return typeMap[status] || 'info';
					},

					// 获取状态文本
					getStatusText(status) {
						const textMap = {
							'pending': '待处理',
							'in-progress': '进行中',
							'completed': '已完成'
						};
						return textMap[status] || status;
					},

					// 处理筛选
					handleFilter() {
						this.loading = true;
						// TODO: 实现筛选逻辑
						setTimeout(() => {
							this.loading = false;
						}, 500);
					},

					// 重置筛选
					resetFilter() {
						this.filterForm = {
							plateNumber: '',
							maintenanceType: '',
							status: '',
							dateRange: []
						};
						this.handleFilter();
					},

					// 显示添加对话框
					showAddDialog() {
						this.dialogTitle = '添加维护记录';
						this.maintenanceForm = {
							plateNumber: '',
							maintenanceType: '',
							description: '',
							status: 'pending',
							startDate: '',
							endDate: '',
							cost: 0,
							remarks: ''
						};
						this.dialogVisible = true;
					},

					// 查看详情
					viewDetails(record) {
						this.selectedRecord = record;
						this.detailsVisible = true;
					},

					// 编辑记录
					editRecord(record) {
						this.dialogTitle = '编辑维护记录';
						this.maintenanceForm = { ...record };
						this.dialogVisible = true;
					},

					// 删除记录
					deleteRecord(record) {
						this.$confirm('确认删除该维护记录吗？', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						}).then(() => {
							// TODO: 实现删除逻辑
							this.$message.success('删除成功');
						}).catch(() => {});
					},

					// 提交表单
					submitForm() {
						this.$refs.maintenanceForm.validate((valid) => {
							if (valid) {
								// TODO: 实现提交逻辑
								this.$message.success('保存成功');
								this.dialogVisible = false;
							}
						});
					},

					// 处理分页大小变化
					handleSizeChange(val) {
						this.pageSize = val;
						this.handleFilter();
					},

					// 处理页码变化
					handleCurrentChange(val) {
						this.currentPage = val;
						this.handleFilter();
					}
				},
				mounted() {
					// 初始化数据
					this.total = this.maintenanceRecords.length;
				}
			});
		</script>
	</body>
</html>